<template>
  <div class="title">
    <h3>浏览图片</h3>
  </div>
  <div class="images">
      <img v-for="(item, index) in images"
        :src="item"
        :key="index"
        @click="viewImages(index)"
      />
  </div>
</template>

<script>
import view from './view-images'
import img_01 from './assets/01.jpeg'
import img_02 from './assets/02.jpeg'
import img_03 from './assets/03.jpeg'
import img_04 from './assets/04.jpeg'
import img_05 from './assets/05.jpeg'

export default {
  setup () {
    const images = [ img_01 , img_02, img_03, img_04, img_05 ]
    const viewImages = index =>{
      view({ images, current: index })
    }
    return {
      viewImages,
      images
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.images {
  display: flex;
  justify-content: center;
}
.images > img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 5px;
  border-radius: 8px;
  cursor: pointer;
}
</style>
